<template>
  <view class="lang-select">
    <uni-icons type="gear-filled" size="24" @click="showDropdown = !showDropdown" />
    <view v-if="showDropdown" class="dropdown">
      <view v-for="item in langOptions" :key="item.value" class="dropdown-item"
        :class="{ active: currentLang === item.value }" @click="handleLangChange(item.value)">
        <text>{{ item.text }}</text>
        <uni-icons v-if="currentLang === item.value" type="checkmarkempty" size="16" color="#007AFF" />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';

const { locale } = useI18n();
const showDropdown = ref(false);

// 语言选项
const langOptions = [
  { value: 'zh-CN', text: '简体中文' },
  { value: 'en-US', text: 'English' }
];

// 当前语言
const currentLang = ref(uni.getStorageSync('language') || 'zh-CN');

// 处理语言切换
const handleLangChange = (value: string | number) => {
  const lang = String(value);
  locale.value = lang;
  uni.setStorageSync('language', lang);
  currentLang.value = lang;
  showDropdown.value = false;
};

onMounted(() => {
  locale.value = currentLang.value;
});
</script>

<style lang="scss" scoped>
.lang-select {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #f5f5f5;
  cursor: pointer;
  transition: all 0.3s;

  &:active {
    background-color: #e0e0e0;
  }
}

.dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  min-width: 120px;
  z-index: 100;
  overflow: hidden;
}

.dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 14px;
  color: #333;
  transition: all 0.3s;

  &:active {
    background-color: #f5f5f5;
  }

  &.active {
    color: #007AFF;
  }
}
</style>
